<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器 - Element, Class, and ID Selectors</title>
    <style>
        /* 所有 h2 元素 */
        xxx {
          color: red;
          text-align: center;
        }

        /* 所有 class="highlight" 的元素 */
        .xxx {
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          background-color: green;
          opacity: .6;
        }

        /* id="mainPoint" 的元素 */
        #xxx {
          font-size: 24px;
          font-weight: bold;
          background-color: red;
          opacity: .7;
        }

        /* 所有的 p 和 h1 元素, */
        xxx, xxx {
          color: blue;
          text-align: center;
        }
    </style>
</head>
<body>
<h1>一级标题 (h1)</h1>
<h2>二级标题 (h2)</h2>
<p class="highlight">
    这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字。</p>
<p class="highlight">这是另一个段落， class="highlight". 这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字</p>
<h2>这个也是二级标题 (h2)</h2>
<p>这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字，这是一个段落，一段随机文字。
</p>
<div>This is the main point of the entire article. So, attribute
    <span id="mainPoint">id="mainPoint".</span>
</div>
</body>
</html>